* {
    box-sizing: border-box;
}

body,
html {
    overflow: hidden;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

h2 {
    font-family: 'Averia Serif Libre', Arial;
    font-size: 2em;
    text-align: center;
}

h3 {
    font-family: 'Averia Serif Libre', Arial;
    font-size: 1.5em;
    text-align: center;
}

ul {
    padding-left: 0;
}

a {
    color: #656565;
}

a:visited {
    color: #656565;
}

.centered-link {
    display: table;

    margin: auto;
}

#map {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#features {
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    bottom: 0;

    overflow-y: scroll;

    max-width: 450px;

    font-family: sans-serif;

    background-color: rgba(250, 250, 250, .8);

    transition: all .3s ease-in-out;
    transform: translateX(100%);
}

#features.visible {
    transform: translateX(0);
}

#features > section {
    padding: 25px 45px;

    font-size: 13px;
    line-height: 25px;

    border-bottom: 1px solid #ddd;
}

.resume-item {
    opacity: .25;

    transition: all .3s ease-in-out;
    transform: scale(.9);
}

.resume-item.active {
    opacity: 1;
    background-color: rgba(250, 250, 250, 1);

    transform: scale(1);
}

.resume-item:first-child {
    margin-bottom: 0;

    opacity: 1;
}

.resume-item:last-child {
    margin-bottom: 600px;

    border-bottom: none;
}


.job-title {
    margin: 0;
    padding: 0;

    font-family: 'Averia Serif Libre', Arial;
    font-weight: 700;
    line-height: .75em;
    text-align: center;
}

.mapboxgl-popup {
    max-width: 400px;

    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

.marker-title {
    font-family: 'Averia Serif Libre', Arial;
    font-weight: 700;
}

.item-logo {
    display: block;

    width: 150px;
    height: 150px;
    margin: 0 auto;

    border-radius: 75px;
    background-position: center;
    background-size: cover;
}

#bic-logo {
    background-image: url(img/bic.png);
}

#hb-logo {
    background-image: url(img/hackbright.png);
}

#gtown-logo {
    background-image: url(img/gtown.png);
}

#rgc-logo {
    background-image: url(img/rgc.png);
}

#belize-logo {
    background-image: url(img/belize.png);
}

#sf-logo {
    background-image: url(img/sfseal.png);
}

.floating {
    position: absolute;
    z-index: 99999;
    top: 50%;
    left: 50%;

    width: 400px;
    height: auto;
    margin-top: -200px;
    margin-left: -200px;
    padding: 25px;

    background-color: white;
}

#lastStop {
    display: none;

    transition: all .3s ease-in-out 0s;
}

button {
    height: 40px;
    margin: 10px;
    padding: 10px;

    font-family: 'Averia Serif Libre', Arial, serif;
    font-size: 12px;
    text-align: center;

    color: #fff;
    border: none;
    border-radius: 3px;
    background: #ee8a65;

    transition: all .3s ease 0s;
}

button:hover {
    background: #f16d3d;
    box-shadow: .5px .5px .25px #888;
}

.date {
    text-align: right;

    opacity: .8;
}

/* Styles to hide and show resume popup content and tour popup content */
.tourPopupContent {
    display: block;
}
.resumePopupContent {
    display: none;
}


/* Styles for resume/tour mode switch */
/* Adapted from Proto.io */

.onoffswitch {
    position: fixed;
    z-index: 99999;

    display: none;

    width: 160px;
    margin: 10px;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
    transition: all .3s ease-in 0s;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block;
    overflow: hidden;

    border: 2px solid #999;
    border-radius: 20px;

    cursor: pointer;
}
.onoffswitch-inner {
    display: block;

    width: 200%;
    margin-left: -100%;

    transition: margin .3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
    display: block;
    float: left;

    box-sizing: border-box;
    width: 50%;
    height: 30px;
    padding: 0;

    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;

    color: white;
}
.onoffswitch-inner:before {
    padding-left: 10px;

    color: #fff;
    background-color: #cacaca;

    content: 'Tour mode on';
}
.onoffswitch-inner:after {
    padding-right: 10px;

    text-align: right;

    color: #999;
    background-color: #eee;

    content: 'Resume mode on';
}
.onoffswitch-switch {
    position: absolute;
    top: 0;
    right: 126px;
    bottom: 0;

    display: block;

    width: 18px;
    margin: 6px;

    border: 2px solid #999;
    border-radius: 20px;
    background: #fff;

    transition: all .3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0;
}


/* Center social media links */
#contact {
    width: 75%;
    margin: 0 auto;
    text-align: center;
}

/* Get rid of underline on social links */
.socialLink {
    text-decoration: none;
}


/* Progress bar styles */
.progress {
    position: absolute;
    z-index: 999;
    top: 0;

    height: 34px;
}

.outer-progress {
    left: 50%;

    width: 400px;
    margin: 10px 10px 10px -200px;

    border: 2px solid #999;
    border-radius: 20px;
    background-color: rgba(250, 250, 250, .8);
}

.inner-progress {
    border-radius: 20px;
    background-color: #ee8a65;
    height: 30px;
    transition: all .3s ease-in-out;
}

.progress-step {
    position: absolute;
    right: 6px;

    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;

    color: #666;
}

/*center p under resume header*/
.center {
    text-align: center;
}

/* Styles for airplane icon*/
#airplane {
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;

    width: 100px;

    opacity: 0;

    transition: opacity .3s ease-in;
    transform: translate(-50%, -50%);
}

#airplane.visible {
    opacity: .8;
}

#airplane.west {
    -webkit-transform: scaleX(-1);
       -moz-transform: scaleX(-1);
         -o-transform: scaleX(-1);
            transform: scaleX(-1);

        filter: FlipH;
    -ms-filter: 'FlipH';
}

@media (max-width: 769px) {
    .floating {
        top: 60px;

        width: 75%;
        margin-top: inherit;
        margin-left: inherit;

        transform: translateX(-50%);
    }

    .outer-progress {
        left: 50%;

        width: 75%;
        margin: 10px auto;

        transform: translateX(-50%);
    }

    .progress-step {
        z-index: 99999999;
        right: 6;
        /* left: 75%; */

        color: #ccc;
    }

    .job-title {
        line-height: 1.25em;
    }
}
